<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="${base}/sweep/css/style.css"/>
    <script src="${base}/backstage/js/jquery.js"></script>
    <link href="${base}/sweep/css/mui.css" rel="stylesheet"/>
    <link href="${base}/sweep/css/app.css" rel="stylesheet"/>
<#--    <script src="${base}/wx/js/mui.js"></script>-->

    <style>
        body {
            margin: 0 auto;
        }
        p {
            text-indent: 22px;
        }
        .mui-content{
            padding-top: 215px;
        }
        .mui-plus .plus{
            display: inline;
        }

        .plus{
            display: none;
        }

        #topPopover {
            position: fixed;
            top: 16px;
            right: 6px;
        }
        #topPopover .mui-popover-arrow {
            left: auto;
            right: 6px;
        }
        p {
            text-indent: 22px;
        }
        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }
        .mui-popover {
            height: 300px;
        }
        .mui-content {
            padding: 10px;
        }
    </style>
</head>
<body>

<!--商品轮播图-->
<div>
    <div id="slider" class="mui-slider" style="height: 180px;float: top">
        <div class="mui-slider-group">
               <div class="mui-slider-item"><a href="#"><img src='${details.commodityUrl}'></a></div>
        </div>
    </div>
<#--        <p style="position: relative;top: 20px;">-->
<#--            ${details.commodityName}-->
<#--        </p>-->
<#--    <div>-->
<#--        <span style="position: relative;top: 30px;left:28px;font-size: 19px;color: red">￥${details.price}</span>-->
<#--    </div>-->

    <!--商品参数-->
    <div style="position: relative;top:40px;">
<#--        <p><span style="font-size: 17px;color: #0C0C0C">商品参数</span></p>-->
        <p style="position: relative;left:10px;">商品名称: ${details.commodityName}</p>
        <p style="position: relative;left:10px;">商品规格: ${type}</p>
        <p style="position: relative;left:10px;">属性分类: ${attributeClassification}</p>
        <p style="position: relative;left:10px;">属性名称: ${attribute}</p>
        <p style="position: relative;left:10px;">商品单价: <span style="color: red">￥${details.price}</span></p>

        <#--        <div class="mui-content">-->
<#--            <div class="mui-content-padded">-->
<#--                <p style="text-indent: 0;">-->
<#--                    <a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"-->
<#--                       style="padding: 5px 20px;">查看更多>>></a>-->
<#--                </p>-->
<#--            </div>-->
<#--        </div>-->

    </div>
<#--    <div id="middlePopover" class="mui-popover">-->
<#--        <div class="mui-popover-arrow"></div>-->
<#--        <div class="mui-scroll-wrapper">-->
<#--            <div class="mui-scroll">-->
<#--                <ul class="mui-table-view">-->
<#--                    <li class="mui-table-view-cell"><a href="#">药品名称: ${commodityParameter.drugName}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">规格: ${commodityParameter.specifications}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">使用剂量: ${commodityParameter.usageDose}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">批准文号: ${commodityParameter.approvalUmber}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">通用名: ${commodityParameter.genericName}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">适用人群: ${commodityParameter.intendedFor}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">产品剂型: ${commodityParameter.productDosageForm}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">类别: ${commodityParameter.category}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">生产企业: ${commodityParameter.manufacturingEnterprise}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">用法: ${commodityParameter.usages}</a></li>-->
<#--                    <li class="mui-table-view-cell"><a href="#">有效期: ${commodityParameter.termOfValidity}</a></li>-->
<#--                </ul>-->
<#--            </div>-->
<#--        </div>-->
<#--    </div>-->
</div>
<!--商品详情-->
<#--<div style="position: relative;top:100px;">-->
<#--    <p><span style="font-size: 17px;color: #0C0C0C">产品参数</span></p>-->
<#--    <div>-->
<#--        <#list commodityDetails as commodityDetails>-->
<#--            <img src="${commodityDetails.url}" style="width: 100%;height: 200px;">-->
<#--        </#list>-->
<#--    </div>-->
<#--</div>-->
<#--<br>-->

<!--注意事项-->
<#--<div style="position: relative;top:100px;">-->
<#--    <p><span style="font-size: 17px;color: #0C0C0C">注意事项</span></p>-->
<#--    <p>-->
<#--        ${detailsOfDrugs.needingAttention}-->
<#--    </p>-->
<#--</div>-->

</body>
<script src="${base}/sweep/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
    var gallery = mui('#slider');
    gallery.slider({
        interval: 3000//自动轮播周期,若为0则不自动播放,默认为0；
    });
    mui.init();


    //弹出框可滑动
    mui('.mui-scroll-wrapper').scroll();
    mui('body').on('shown', '.mui-popover', function(e) {
        //console.log('shown', e.detail.id);//detail为当前popover元素
    });
    mui('body').on('hidden', '.mui-popover', function(e) {
        //console.log('hidden', e.detail.id);//detail为当前popover元素
    });

</script>

</html>